<script>
  imageRecNo = <%= @imageRec.id %>;
  doInit();
</script>

<div>
  <div id="img_update"></div>

  <div id="color_picker" hiden="true">
    <input id="color_picker_input" class="color" type="text" value="#000000" size="8"/>
  </div>
  <canvas id="canvas" width="<%= @image.columns %>" height="<%= @image.rows %>"></canvas>
  <canvas id="canvasInterface" width="<%= @image.columns %>" height="<%= @image.rows %>"></canvas>

  <div id="PButtons">
    <a href="#" onclick="setCPDrawAction(0)">Brush</a><br />
    <a href="#" onclick="setCPDrawAction(1)">Pencil</a><br />
    <a href="#" onclick="setCPDrawAction(2)">Line</a><br />
    <a href="#" onclick="setCPDrawAction(3)">Rectangle</a><br />
    <a href="#" onclick="setCPDrawAction(4)">Circle</a><br />
    <a href="#" onclick="setCPDrawAction(5)">Clear</a><br />
    <a href="#" onclick="saveDrawing.removeLastNode()">Undo</a><br />
    <a href="#" onclick="saveDrawing.addLastRemovedNode()">Redo</a><br />
    <a href="#" onclick="sendDrawings()">Save</a><br />
  </div>

  <input type="radio" id="filled_radio" name="filled" value="Solid" checked="checked" onclick="canvasPainter.setFilled(false)"/>
  <input type="radio" id="filled_radio" name="filled" value="Filled" onclick="canvasPainter.setFilled(true)" />

  <input type="radio" id="solid_color_radio" name="color" value="Solid color" checked="checked" onclick="setSolidColor(true)"/>
  <input type="radio" id="fill_color_radio" name="color" value="Filled color" onclick="setSolidColor(false)" />


  <a href="#" class="lbAction" rel="deactivate">close</a>
  <div class="slider" id="width_slider" tabIndex="1">
    <input class="slider-input" id="width_slider_input" name="width_slider_input" hiden="true"/>
  </div>
  <script type="text/javascript">
    var s = new Slider(document.getElementById("width_slider"), document.getElementById("width_slider_input"));
    s.setMaximum(15);
    s.setMinimum(1);
    s.onchange = function() {
      canvasPainter.setLineWidth(s.getValue());
    }
    s.setValue(1);
  </script>
</div>
